<%--
  Created by IntelliJ IDEA.
  User: 15890741124
  Date: 2022/9/6
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <style>
        /*body {
            background-image: url("${pageContext.request.contextPath}/static/image/mm.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
        }*/

        span {
            color: pink;
        }
    </style>
</head>
<body>
<div id="show" style="width: 100%;height: 60% ">
    <span id="bb">MHT测试人数</span><span></span>
    <div style="width: 50%;height: 350px;color: pink; margin: auto;" id="shopping"></div>
    <div style="width: 100%;height: 350px;color: pink; margin: auto;" id="shop"></div>
</div>
</body>
<script>
    layui.config({
        version: 1,
        base: '${pageContext.request.contextPath}/js/' //这个就是你放Echart.js的目录
    })
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        $.ajax({
            url: "${pageContext.request.contextPath}/testResultMht/queryStatement.do"
            //响应的数据类型
            , dataType: "JSON"
            , type: "POST"
            //异步请求
            // async: true,
            //成功的回调
            , success: function (data) {
                if (data.code == 0) {
                    var validity = data.data.validity,
                        study = data.data.study,
                        people = data.data.people,
                        loneliness = data.data.loneliness,
                        remorse = data.data.remorse,
                        allergies = data.data.allergies,
                        body = data.data.body,
                        terror = data.data.terror,
                        impulsion = data.data.impulsion
                    total = data.data.total;
                    $("#bb").next().html(total);
                    var myChart = echarts.init(document.getElementById('shopping'));
                    var option;
                    option = {
                        color: ['red', 'yellow'],
                        title: {
                            text: 'MHT测试结果统计'
                        },
                        legend: {
                            data: ['不合格', '总人数']
                        },
                        radar: {
                            indicator: [
                                {name: '效度评估', max: total},
                                {name: '学习焦虑', max: total},
                                {name: '对人焦虑', max: total},
                                {name: '孤独倾向', max: total},
                                {name: '自责倾向', max: total},
                                {name: '过敏倾向', max: total},
                                {name: '身体症状', max: total},
                                {name: '恐怖倾向', max: total},
                                {name: '冲动倾向', max: total}
                            ],
                            center: ['50%', '50%'],
                            radius: 120,
                            axisName: {
                                color: '#fff',
                                backgroundColor: '#666',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        series: [


                            {
                                name: 'Budget vs spending',
                                type: 'radar',//雷达图类型
                                data: [
                                    {
                                        value: [validity, study, people, loneliness, remorse, allergies, body, terror, impulsion],
                                        name: '不合格',
                                        lineStyle: {
                                            type: 'dashed'
                                        },

                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            }
                                        }
                                    },
                                    {
                                        value: [total, total, total, total, total, total, total, total, total],
                                        name: '总人数',
                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    myChart.setOption(option);
                    var colors = ['red', 'yellow', 'blue', 'pink', 'green']
                    var myChart = echarts.init(document.getElementById('shop'));
                    var optio = {
                        color: colors,
                        xAxis: {
                            type: 'category',
                            data: ['效度评估', '学习焦虑', '对人焦虑', '孤独倾向', '自责倾向', '过敏倾向', '身体症状', '恐怖倾向', '冲动倾向'],
                            center: ['100%', '50%'],
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                        },
                        series: [
                            {
                                data: [validity, study, people, loneliness, remorse, allergies, body, terror, impulsion],
                                type: 'line',
                                label: {
                                    show: true,

                                },
                                smooth: true
                            }
                        ],
                    }
                    myChart.setOption(optio);
                }
                layer.msg(data.msg);
            }
        });


    });

</script>
</html>
